<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在leaflet中使用GeoJSON格式的数据</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css"/>
    <script src="../leaflet/leaflet.js"></script>
    <style>

    </style>

</head>
<body>
<div id="mapid" style="width: 800px; height: 600px;"></div>
<script>

    // 设置地图坐标，以及地图缩放等级
    var map = L.map('mapid').setView([43.81248, 87.60052], 15);

    // 加载高德地图接口
    L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?' + 'lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {subdomains: ["1", "2", "3", "4"]}).addTo(map);

    var geojsonFeature = {
        "type": "Feature",
        "properties": {
            "name": "Coors Field",
            "amenity": "Baseball Stadium",
            "popupContent": "This is where the Rockies play!"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [43.81248, 87.60052]
        }
    };

    L.geoJSON(geojsonFeature).addTo(map);

    // 设置点击事件
    /*function onMapClick(e) {
        alert("You clicked the map at " + e.latlng);
    }
    mymap.on('click', onMapClick);*/

</script>
</body>
</html>
